<template>
  <div id="home">
    <User></User>
    <article>
      <div id="shop">
        <div class="shopTop">
          <div>
            <div class="left">
              <img src="../../assets/image/微信截图_20210410213227.png" alt />
              <ul>
                <li>
                  <router-link to="/shopIndex">首页</router-link>
                </li>
                <li>
                  <router-link to="/shopAll">全部商品</router-link>
                </li>
                <li>
                  <router-link to="/AboutMy">关于我们</router-link>
                </li>
              </ul>
            </div>
            <el-input placeholder="请输入搜索内容" v-model="search" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="getSearch(search)"></el-button>
            </el-input>
          </div>
        </div>
      </div>
      <router-view></router-view>
    </article>
    <!-- 脚部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import User from "@/components/User/user"
import Api from "@/api/Search.js";
import { mapState, mapMutations } from "vuex";
import ShopListIndex from "@/components/Home/ShopListIndex.vue";
import Footer from "@/components/FooterStyle/footer.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Footer, ShopListIndex ,User},
  props: {},
  data() {
    //这里存放数据
    return {
      search: "", //搜索内容值
      // LoginFlagDialog: false, //登录弹出框开关
      // obj: {
      //   username: "",
      //   password: ""
      // }
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //用户登录
    // onSubmit() {
    //   var obj = {
    //     username: this.obj.username,
    //     password: this.obj.password,
    //     token: 123456
    //   };
    //   this.$message({
    //     message: "登陆成功",
    //     type: "success"
    //   });
    //   this.$store.commit("onsubmit", obj);
    //   this.LoginFlagDialog = false;
    // },
    // layoutLogin() {
    //   this.$confirm("你确定要退出登录吗?", {
    //     confirmButtonText: "果断退出",
    //     cancelButtonText: "我再想想",
    //     type: "warning"
    //   })
    //     .then(() => {
    //       this.$message({
    //         type: "success",
    //         message: "退出登录成功!"
    //       });
    //       this.$store.commit("layout");
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消退出登录"
    //       });
    //     });
    // },
    // // 搜索商品
    getSearch(search) {
      console.log(search);
      if (search.trim() != "") {
        this.$router.push("/shopAll/goods?search=" + search);
        this.search = "";
        this.$store.state.show = true;
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.getProductBySearch();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
#home {
  width: 100%;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 40px;
    background: #303030;
    display: flex;
    flex-direction: row-reverse;
    #right {
      width: 360px;
      height: 100%;
      padding-right: 56px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        list-style: none;
        font-size: 12px;
        color: #7c838d;
        font-weight: 700;
        &:nth-of-type(1) {
          width: 70px;
          // border: 1px solid #000;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span:hover {
            color: white;
          }
        }
        &:nth-of-type(2):hover,
        &:nth-of-type(3):hover {
          color: white;
        }
        &:nth-of-type(4) {
          width: 110px;
          height: 100%;
          text-align: center;
          line-height: 40px;
          background: #363636;
          &:hover {
            background: red;
            color: white;
          }
        }
      }
    }
  }
  article {
    flex: 1;
    background: white;
    #shop {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .shopTop {
        padding: 0 200px;
        width: 100%;
        height: 80px;
        padding-top: 20px;
        div {
          width: 100%;
          height: 100%;
          border-bottom: 1px solid #e4e4e4;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            width: 510px;
            height: 100%;
            display: flex;
            justify-content: space-between;
            img {
              width: 170px;
              height: 100%;
            }
            ul {
              width: 250px;
              height: 100%;

              display: flex;
              justify-content: space-between;
              li {
                list-style: none;
                height: 100%;

                a {
                  font-weight: 700;
                  display: flex;
                  height: 100%;
                  padding: 0 14px;
                  font-size: 12px;
                  line-height: 70px;
                  text-decoration: none;
                  color: #7d7f82;
                }
                a.router-link-active {
                  color: #2a66a5;
                  border-bottom: 2px solid #2a66a5;
                }
              }
            }
          }
        }
      }
      .shopBottom {
        flex: 1;
      }
    }
  }
}
.el-input-group {
  width: 30% !important;
}
/deep/.el-dialog__title {
  padding-left: 120px !important;
}
/deep/.el-dialog {
  width: 20% !important;
}
.el-button {
  padding: 21px 12px !important;
  width: 100% !important;
}
</style>